<template>
	<view class="orderDetail u-skeleton">
		<u-navbar title="订单详情" :background="{'backgroundColor':'#fff'}" :borderBottom="false"
			class="u-skeleton-rect"></u-navbar>
		<view class="top">
			<view class="title" v-if="orderInfo.status == 1">待支付</view>
			<view class="title" v-if="orderInfo.status == 2">待发货</view>
			<view class="title" v-if="orderInfo.status == 3">待收货</view>
			<view class="title" v-if="orderInfo.status == 4">已完成</view>
			<view class="title" v-if="orderInfo.status == -1">已取消</view>
			<view class="pay-time" v-if="orderInfo.status == 1">
				支付结束时间：
				<count-down :diy_time="Number( orderInfo.pay_end_time)" @edit_time="time_end = false" v-if="time_end"></count-down>
				<text v-else>已结束</text>
			</view>
			<view class="t-content">
				<view class="tc-title">
					<u-icon name="car-fill" size='30'></u-icon>
					<view class="txt">
						<text v-if="orderInfo.status == 1">待支付</text>
						<text v-if="orderInfo.status == 2">待发货</text>
						<text v-if="orderInfo.status == 3">待收货</text>
						<text v-if="orderInfo.status == 4">已完成</text>
						<text v-if="orderInfo.status == -1">已取消</text>
					</view>
				</view>
				<block v-if="orderInfo">
					<view class="tc-content">物流公司：{{orderInfo.delivery_name}}</view>
					<view class="tc-content">快递单号：{{orderInfo.outside_no}}</view>
					<view class="tc-content">发货时间：{{orderInfo.send_time}}</view>
				</block>
				<!-- <block>
					<view class="tc-content">暂无物流信息</view>
					<view class="tc-content">2020-11-12 20:12:12</view>
				</block> -->
			</view>
		</view>
		<view class="user">
			<view class="u-top">
				<view class="name">{{orderInfo.receiver_name}}</view>
				<view class="mobile">{{orderInfo.receiver_phone}}</view>
			</view>
			<view class="address">{{orderInfo.receiver_add}}</view>
		</view>
		<view class="goods">
			<view class="box" v-if="orderInfo.goods">
				<view class="left">
					<image :src="$util.img(orderInfo.goods.image)" mode=""></image>
				</view>
				<view class="right">
					<view class="r-title">{{orderInfo.goods.name}}</view>
					<view class="r-num">数量：{{orderInfo.num}}</view>
				</view>
			</view>
			<view class="g-price">
				<text>合计：￥{{orderInfo.total_price}}</text>
			</view>
		</view>
		<view class="order">
			<view class="item">
				<view class="i-left">订单编号</view>
				<view class="i-right">{{orderInfo.orderno}}</view>
			</view>
			<view class="item">
				<view class="i-left">创建时间</view>
				<view class="i-right">{{orderInfo.create_time}}</view>
			</view>
			<block v-if="orderInfo.status != 1 && orderInfo.status != -1">
				<view class="item">
					<view class="i-left">支付时间</view>
					<view class="i-right">{{orderInfo.pay_time}}</view>
				</view>
				<view class="item">
					<view class="i-left">支付方式</view>
					<view class="i-right">{{orderInfo.pay_type == 1 ? '微信' : '支付宝'}}</view>
				</view>
			</block>
			<view class="item" v-if="orderInfo.status == 3">
				<view class="i-left">退款时间</view>
				<view class="i-right">{{orderInfo.refund_time}}</view>
			</view>
		</view>

		<view class="die-btn" v-if="orderInfo.status == 1">
			<view class="btn h-btn" @click="closeBtn">取消订单</view>
			<view class="btn" @click="payBtn">立即支付</view>
		</view>
		<view class="die-btn" v-if="(orderInfo.refund_status == 1 || orderInfo.refund_status == 4) && (orderInfo.status == 2 || orderInfo.status == 3)">
			<view class="btn" @click="refundOrder ">申请退款</view>
		</view>
		<view class="die-btn" v-if="orderInfo.status == 3">
			<view class="btn" @click="setTakeGoods">确认收货</view>
		</view>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import countDown from "../../components/countdown/countdown.vue"
	export default {
		components:{countDown},
		data() {
			return {
				// 首次进入加载
				loding: true,
				//页面的数据
				orderInfo: {},
				//订单id
				id:0,
				//结束时间
				time_end:true
			}
		},
		onLoad(option) {
			this.id = option.id;
			
		},
		onShow() {
			this.getinfo(this.id);
		},
		methods: {
			//获取订单详情数据
			getinfo(id) {
				this.$http.asyncSendrequest({
					url: '/order/orderDetail',
					data: {id},
					success: res => {
						if (res.code == '0') {
							this.loding = false;
							this.orderInfo = res.data;
						}
					}
				})
			},
			//取消订单
			closeBtn(){//
				this.$http.asyncSendrequest({
					url: '/order/cancelOrder',
					data: {
						id:this.id
					},
					success: res => {
						this.$util.taost({
							title:res.msg,
							callback:v=>{
								if (res.code == '0') {
									this.getinfo(this.id);
								}
							}
						})

					}
				})
			},
			// 支付订单
			payBtn(){
				uni.setStorage({
					key: 'goodsPay',
					data: this.orderInfo.total_price,
					success:res=>{
						this.$util.redirectTo('/pages/order/cashier',{id:this.orderInfo.id});
					}
				})
			},
			//确认收货
			setTakeGoods() {
				this.$http.asyncSendrequest({
					url: '/order/OrderStaus',
					data: {
						id:this.id
					},
					success: res => {
						if (res.code == '0') {
							this.getinfo(this.id);
						}
					}
				})
			},
			//神情退款
			refundOrder () {
				this.$http.asyncSendrequest({
					url: '/order/refundOrder',
					data: {
						id:this.id
					},
					success: res => {
						this.$util.taost({
							title:res.msg,
							callback:v=>{
								if (res.code == '0') {
									this.getinfo(this.id);
								}
							}
						})
						
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		min-height: 100rpx;
		background: #292929;
		padding: 30rpx;
		margin-bottom: 20rpx;
		.pay-time{
			color: #fff;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
		}
		.title {
			color: #fff;
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}

		.t-content {
			width: 100%;
			// height: 220rpx;
			border-radius: 10rpx;
			background: #fff;
			margin-top: 20rpx;
			padding: 30rpx;
			.tc-title{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				margin-bottom: 14rpx;
				.txt{
					margin-left: 20rpx;
				}
			}
			.tc-content{
				font-size: 26rpx;
				color: rgba(0,0,0,.4);
				margin-bottom: 14rpx;
			}
			.tc-content:last-child{
				margin-bottom: 0;
			}
		}
		
	}

	.user {
		margin: 0 30rpx 20rpx;
		min-height: 100rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 10rpx;

		.u-top {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.name {
				font-size: 30rpx;
				font-weight: bold;
				margin-right: 50rpx;
			}

			.mobile {
				font-size: 26rpx;
			}
		}
	}

	.goods {
		margin: 0 30rpx 20rpx;
		min-height: 100rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 10rpx;

		.box {
			display: flex;
			justify-content: space-between;

			.left {
				margin-right: 20rpx;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}

			.right {
				width: calc(100% - 180rpx);

				.r-title {
					height: 80rpx;
					margin-bottom: 20rpx;
					font-size: 26rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden
				}

				.r-num {
					font-size: 26rpx;
				}
			}
		}

		.g-price {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: right;
			font-weight: 700;
			color: #323232;
		}
	}

	.order {
		margin: 0 30rpx 20rpx;
		min-height: 100rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 10rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 0 14rpx;

			.i-left {
				font-size: 24rpx;
				color: #333;
			}

			.i-right {
				font-size: 24rpx;
				color: #999;
			}
		}

		.item:last-child {
			margin-bottom: 0;
		}
	}
	
	.die-btn{
		display: flex;
		align-items: center;
		justify-content: right;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-right: 30rpx;
		height: 100rpx;
		.btn {
			height: 60rpx;
			background: #292929;
			border-radius: 6rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			padding: 0 30rpx;
			border: 1rpx solid #323232;
			margin-left: 30rpx;
		}
		.h-btn{
			color: #323232;
			background: none;
		}
	}
</style>